<template>
  <div class="crumb">
    <el-breadcrumb separator="/">
      <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item> -->
      <el-breadcrumb-item v-for="(item, index) in titles" :key="index">
        {{ item }}
      </el-breadcrumb-item>
      <!-- <el-breadcrumb-item>活动详情</el-breadcrumb-item> -->
    </el-breadcrumb>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      // titles的值和当前所在的路由相关
      // 当前路由一发生变化，titles的值就变化. 所以要监听路由的变化！！
      titles: [],
    }
  },
  computed: {
    ...mapState('buju', ['showroutertitle']),
  },
  watch: {
    $route: {
      immediate: true, // 刷新页面就立即监听
      handler(val, oldval) {
        console.log(this.$route.path);
        // 当前路由：this.$route     里面可以有元信息meta  (meta存放当前路由相关的数据)
        this.titles = this.$route.meta.titles
        // console.log(this.showroutertitle);
        if (this.showroutertitle) {
          if (this.$route.meta.titles[1]) {
            document.title = this.$route.meta.titles[1] + '—后台管理系统'
          } else {
            document.title = this.$route.meta.titles[0] + '—后台管理系统'
          }
        } else {
          document.title = '通用后台管理系统'
        }
      },
    },
    showroutertitle: {
      immediate: true,
      handler(val, oldval) {
        if (this.showroutertitle) {
            document.title = this.$route.meta.titles[0] + '—后台管理系统'
        } else {
          document.title = '通用后台管理系统'
        }
      },
    },
  },
}
</script>

<style lang="less" scoped>
.crumb .el-breadcrumb {
  line-height: 50px;
  font-size: 15px;
}
</style>
